<script setup>
import homeTitle from "../assets/home/home-title.png";
import homeBanner2 from "../assets/home/home-banner2.png";
import home1 from "../assets/assets/home-1.png";

import home2 from "../assets/assets/home-2.png";

import home3 from "../assets/assets/home-3.png";

import introVideo from "../assets/home/intro.mp4";

import homeText from "../assets/home/home-text.png";
import notice from "../assets/home/notice.png";

import desTitle from "../assets/home/home-2.png";
import desTitleCn from "../assets/home/des-title.png";

import videoBg from "../assets/home/video-bg.png";
import playBtn from "../assets/home/play-btn.png";
import rules from "../assets/home/home-3.png";
import rulesCn from "../assets/home/rules.png";

import starIcon from "../assets/home/star-icon.png";
import plane from "../assets/home/plane.png";
import more from "../assets/home/more.png";
import { http } from "../services/service";
import { useUserStore } from "../store/index";
import i18n from "../i18n/lang/index";
import { useI18n } from "vue-i18n";
import { ref, computed } from "vue";
import { showToast } from "vant";
const i18nUse = useI18n();
const store = useUserStore();
// 视频播放器配置
let playerOptions = ref({
  height: 300,
  playbackRates: [0.7, 1.0, 1.5, 2.0],
  autoplay: "any",
  muted: true,
  loop: true,
  preload: "auto",
  language: "zh-CN",
  aspectRatio: "16:9",
});
const sendCode = () => {
  if (!email.value) {
    showToast(i18nUse.t("email_warning"));
    return;
  }
  http
    .get(`/api/v1/index/sendBindEmailCode?email=${email.value}`)
    .then((response) => {
      showToast(i18nUse.t("code_send_success"));
      isDisposed.value = true;
      handleTimeChange();
    })
    .catch((error) => {
      console.error(error);
    });
};

const handleTimeChange = () => {
  if (time.value <= 0) {
    isDisposed.value = false;
    time.value = 60;
  } else {
    setTimeout(() => {
      time.value--;
      handleTimeChange();
    }, 1000);
  }
};

const time = ref(60);
const isDisposed = ref(false);

const getUser = () => {
  const first_name = app?.initDataUnsafe.user?.first_name ?? "";
  const last_name = app?.initDataUnsafe.user?.last_name ?? "";
  const nickName = first_name + last_name;

  http
    .get(
      `/api/v1/index/checkUserEmail?telegramId=${
        store.getUser?.telegramId
      }&nickName=${nickName}&userName=${
        app?.initDataUnsafe?.user?.username ?? ""
      }`
    )
    .then(
      (response) => {
        const data = response.data;
        if (data.code === 200 && data.data?.user) {
          store.setUserInfo({
            ...store.getUser,
            ...data.data.user,
          });
          http.defaults.headers.common['Authorization'] = data.data.token;
        } else {
          show.value = true;
          showToast(data.message);
        }
      },
      () => {
        show.value = true;
      }
    );
};

const app = window?.Telegram?.WebApp;
if (app) {
  app.ready();
  console.log(app?.initDataUnsafe);
  console.log(app);
  store.setApp(app);
  store.setUserInfo({
    ...store.getUser,
    ...app.initDataUnsafe.user,
    telegramId: app?.initDataUnsafe?.user?.id
  });
}
getUser();

const confirmButtonDisabled = computed(() => {
  return email.value && code.value && inviteCode.value;
});

const handleClose = () => {
  const first_name = store.getUser?.first_name ?? "";
  const last_name = store.getUser?.last_name ?? "";
  const nickName = first_name + last_name;

  console.log(first_name);
  console.log(last_name);
  console.log(nickName);
  http
    .get(
      `/api/v1/index/into?telegramId=${store.getUser?.telegramId}&inviCode=${
        inviteCode.value
      }&email=${email.value}&emailCode=${
        code.value
      }&nickName=${nickName}&userName=${store.getUser?.username ?? ""}`
    )
    .then((response) => {
      const data = response.data;
      if (data.code === 200) {
        setTimeout(() => {
          store.setUserInfo({
            ...store.getUser,
            ...data.data.user,
          });
          showToast(i18nUse.t("register_success"));
        }, 300);
      } else {
        showToast(data.message);
        setTimeout(() => {
          show.value = true;
        }, 1000);
      }
    })
    .catch((error) => {
      console.error(error);
    });
};

const show = ref(false);
const email = ref("");
const code = ref("");
const inviteCode = ref("");
const isEN = computed(() => {
  return i18n.global.locale !== "zhCn";
});
const changeLanguage = () => {
  i18n.global.locale = i18n.global.locale !== "zhCn" ? "zhCn" : "en";
  isEN.value = i18n.global.locale !== "zhCn";
};
const secondsTxt = computed(() => {
  return isEN.value ? time.value + "s" : time.value;
});
</script>

<template>
  <van-dialog
    v-model:show="show"
    width="95%"
    @close="handleClose"
    :confirmButtonText="$t('confirm')"
    :confirmButtonDisabled="!confirmButtonDisabled"
  >
    <div class="withDrawDialog">
      <van-field v-model="email" :label="$t('email')" label-width="40px" />
      <van-button
        color="#4A61F9"
        class="code-btn"
        :disabled="isDisposed"
        @click="sendCode()"
      >
        {{ isDisposed ? secondsTxt : $t("Send") }}
      </van-button>
      <van-field
        v-model="code"
        type="number"
        :label="$t('verification_code')"
        label-width="120px"
      />
      <van-field
        v-model="inviteCode"
        type="number"
        :label="$t('invite_code')"
        label-width="120px"
      />
    </div>
  </van-dialog>
  <div class="container">
    <div class="title">
      <img :src="homeTitle" class="title-img" />
      <div @click="changeLanguage()">
        {{ $t("language") }}
        <van-icon name="arrow-down" size="15" />
      </div>
    </div>
    <div class="home-banner-container-1">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img :src="home1" alt="" />
        </van-swipe-item>
        <van-swipe-item> <img :src="home2" alt="" /></van-swipe-item>
        <van-swipe-item> <img :src="home3" alt="" /></van-swipe-item>
      </van-swipe>
    </div>
    <div class="notice-container">
      <img
        :src="i18n.global.locale === 'en' ? homeText : notice"
        style="
          width: 70px;
          height: 30px;
          object-fit: contain;
          display: inline-block;
          margin-right: 5px;
        "
      />
      <span>
        {{ $t("notice") }}
      </span>
    </div>
    <div class="project-description">
      <div style="text-align: center">
        <img
          :src="isEN ? desTitle : desTitleCn"
          style="width: 200px; height: 35px; object-fit: contain"
        />
      </div>
      <div class="text-container">
        {{ $t("home_des") }}
      </div>
      <div class="video-bg">
        <video-player
          :src="introVideo"
          :height="'200px'"
          :options="playerOptions"
          :volume="0.6"
          class="home-banner"
        />
      </div>
      <div class="project-description">
        <div style="text-align: center">
          <img
            :src="isEN ? rules : rulesCn"
            style="width: 200px; height: 35px; object-fit: contain"
          />
        </div>
        <div class="home-banner-container-1">
          <img :src="homeBanner2" class="home-banner" />
        </div>
      </div>
      <div class="rule-container" style="margin-top: 80px">
        <span class="title-rule">
          <img
            :src="starIcon"
            style="width: 14px; height: 14px; margin-right: 3px"
          />
          <span>{{ $t("rule_title1") }}</span></span
        >
        <span class="content">
          {{ $t("rule_des1") }}
        </span>
      </div>

      <div class="rule-container">
        <span class="title-rule">
          <img
            :src="plane"
            style="width: 14px; height: 14px; margin-right: 3px"
          />
          <span style="color: #7d66fc">{{
            $t("user_participation")
          }}</span></span
        >
        <span class="content">{{ $t("user_participation_des") }} </span>
      </div>

      <div class="rule-container">
        <span class="title-rule">
          <img
            :src="more"
            style="width: 14px; height: 14px; margin-right: 3px"
          />
          <span style="color: #66aefc">{{ $t("trade_rule") }}</span></span
        >
        <span class="content">
          {{ $t("trade_rule_des") }}
        </span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.my-swipe .van-swipe-item {
  color: #fff;
  text-align: center;
  > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.video-bg {
  width: 83%;
  height: 156px;
  margin: 40px auto 0 auto;
  position: relative;
}

.withDrawDialog {
  min-height: 40px;
  padding: 22px 16px;
  font-size: 16px;

  .van-cell__title {
    width: 30px;
  }

  .code-btn {
    height: 24px;
    position: absolute;
    top: 31px;
    right: 30px;
  }

  .van-cell {
    background-color: unset !important;
    color: #fff !important;

    .van-cell__title {
      color: #fff !important;
    }
  }

  .van-cell__title {
    color: #fff !important;
  }
}

.container {
  background: url("../assets/home-page-bg.png");
  width: 100%;
  min-height: 100vh;
  padding-bottom: 100px;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  color: #fff;
}

.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  position: sticky;
  top: 0px;
  z-index: 100;
  background: #202336;
}

.title-img {
  width: 120px;
  height: 25px;
}

.notice-container {
  padding: 0 31px;
  margin-top: 65px;
  font-size: 13px;
  display: flex;
  align-items: center;
}

.rule-container {
  width: calc(100% - 32px);
  height: 196px;
  font-size: 12px;
  margin: 20px auto 0 auto;
  border: 1px dashed #4a61f9;
  border-radius: 10px;
  background: rgba(48, 55, 90, 0.6);

  .title-rule {
    color: #4a61f9;
    font-size: 13px;
    padding: 24px 13px 0 13px;
    display: flex;
    align-items: center;
  }

  .content {
    padding: 14px 16px 0 16px;
    display: inline-block;
  }
}

.home-banner-container-1 {
  margin: 16px auto 0 auto;
  width: calc(100% - 32px);
  height: 175px;

  .home-banner {
    width: 100%;
  }
}

.project-description {
  margin-top: 60px;
}

.text-container {
  text-indent: 2rem;
  font-family: "dinMedium";
  font-size: 12px;
  padding: 0 46px;
  margin-top: 20px;
}

.play-container {
  position: absolute;
  width: 121px;
  height: 27px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  display: flex;
  background: #4d6275;
  align-items: center;
  border-radius: 10px;
  justify-content: center;

  img {
    opacity: 1;
    width: 13px;
    height: 13px;
    margin-right: 5px;
  }

  span {
    opacity: 1;
  }
}
</style>
